<template>
    <div class="boke-index">
     <van-tabs  v-model="activeName">
        <van-tab  name="a">
         <template #title>
            <van-icon name="wap-nav" size=".4rem"/>
         </template>
        </van-tab>
        <van-tab  title="听听" name="b">
          <Hear></Hear>
        </van-tab>
        <van-tab  title="推荐" name="c">
          <Recommend></Recommend>
        </van-tab>
        <van-tab  title="分类" name="d">
          <Classify></Classify>
        </van-tab>
        <van-tab  name="e">
          <template #title>
            <div style="background:#ee0a24;
                        border-radius:50% ;
                        width:0.4rem ;
                        height:0.4rem ;
                        line-height:0.3rem;
                        text-align:center">
              <van-icon name="add-o" color="#fff" size=".4rem" />
            </div>
         </template>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import Classify from './Classify.vue';
import Hear from './Hear.vue';
import Recommend from './Recommend.vue';
export default {
  name: 'List',
  components:{
   Hear,
   Recommend,
   Classify,
  },
   data() {
    return {
      activeName: 'b',
    };
  },
}
</script>

<style scoped>
  .boke-index{
    padding-bottom: .96rem;
  }
</style>
